<template>
  <div class="hello">
    <h3 align="center"style="font-family:黑体font-size:bold"><font color="#B8B8B8">*网站指南❤❤*</font></h3>
    <el-steps :active="8" align-center>
      <el-step title="步骤1" description="注册"></el-step>
      <el-step title="步骤2" description="登录"></el-step>
      <el-step title="步骤3" description="写文章"></el-step>
      <el-step title="步骤4" description="发布文章（可以查看自己的文章，并进行删除修改）"></el-step>
      <el-step title="步骤5" description="关注好友（可以取消关注，并发送私信）"></el-step>
      <el-step title="步骤6" description="查看朋友圈动态（当好友发布文章时，动态会显示）"></el-step>
      <el-step title="步骤7" description="消息（接受私信，可以进行回复）"></el-step>
      <el-step title="步骤8" description="注销"></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: 'hello',

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .hello{
    width: 90%;
    height: 100%;
    margin:  0 auto;
    margin-top: 40px;
    text-align: center;
      background-color: #F0F8FF;
    .title{
      margin-bottom: 20px;
    }
  }

</style>
